<template>
  <div>
    <el-dialog
      title="地图选址"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="close_map"
      :visible.sync="addedFormVisible_map"
      class="main_dialog dialog840"
    >
      <el-form :inline="false" class="demo-form-inline" label-width="60px">
        <el-form-item label="地图：">
          <div id="allmap" v-if="addedFormVisible_map">
            <baidu-map
              :style="mapStyle"
              class="bm-view"
              ak="GPO8jLk2SoDXF5nnaOdDudHxIsMVEK6V"
              :center="center"
              :zoom="zoom"
              :scroll-wheel-zoom="true"
              @click="getClickInfo"
              @moving="syncCenterAndZoom"
              @moveend="syncCenterAndZoom"
              @zoomend="syncCenterAndZoom"
            >
              <bm-view :style="mapStyle"></bm-view>
              <!-- bm-marker 就是标注点 定位在point的经纬度上 跳动的动画 -->
              <bm-marker
                :position="{ lng: center.lng, lat: center.lat }"
                :dragging="true"
                animation="BMAP_ANIMATION_BOUNCE"
              ></bm-marker>
              <bm-control :offset="{ width: '10px', height: '10px' }">
                <bm-auto-complete
                  v-model="keyword"
                  :sugStyle="{ zIndex: 999999 }"
                >
                  <input
                    type="text"
                    placeholder="请输入搜索关键字"
                    class="serachinput"
                  />
                </bm-auto-complete>
              </bm-control>
              <bm-local-search
                :keyword="keyword"
                :auto-viewport="true"
                style="width: 0px; height: 0px; overflow: hidden"
              ></bm-local-search>
            </baidu-map>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close_map"
          >取 消</el-button
        >
        <el-button type="primary" @click="setupmine_map" v-repeatClick
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  BaiduMap,
  BmControl,
  BmView,
  BmAutoComplete,
  BmLocalSearch,
  BmMarker,
} from "vue-baidu-map";

export default {
  components: {
    BaiduMap,
    BmControl,
    BmView,
    BmAutoComplete,
    BmLocalSearch,
    BmMarker
  },
  data() {
    return {
      addedFormVisible_map:false,
      keyword: "",
      mapStyle: {
        width: "100%",
        height: "400px",
      },
      center:this.zcenter,
      zoom: 11,
    };
  },
  props: {
    zcenter: {
      type: Object,
      default: function () {
        return { lng: 115.89352755, lat: 28.689578 };
      },
    },
  },
  mounted() {},
  created() {},
  methods: {
    // 地图
    getClickInfo(e) {
      this.center.lng = e.point.lng;
      this.center.lat = e.point.lat;
    },
    syncCenterAndZoom(e) {
      // 地图当前的经纬度
      const { lng, lat } = e.target.getCenter();
      this.center.lng = lng;
      this.center.lat = lat;
      // 地图当前的缩放比例
      this.zoom = e.target.getZoom();
    },
    setupmine_map() {
      let that = this;
      var point = new BMap.Point(this.center.lng, this.center.lat);
      /* 创建地址解析器的实例 */
      var gc = new BMap.Geocoder();
      /* 利用坐标获取地址的详细信息 */
      this.addedFormVisible_map=false
      gc.getLocation(point, function (rs) {
        that.$emit("setupmine_map", {
          center: { lng: that.center.lng, lat: that.center.lat },
          address: rs.address,
        });
      });
      /* 获取位置对应的坐标 */
      // gc.getPoint(this.keyword, point => {
      //   this.selectedLng = point.lng;
      //   this.selectedLat = point.lat;
      // });
    },
    sing(){
      this.zoom = 11;
      this.addedFormVisible_map=true
    },
    close_map() {
      this.keyword = "";
      this.zoom = 11;
      this.addedFormVisible_map=false
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.serachinput {
  font-size: $font_14;
  color: $colour_6;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  height: 32px;
  line-height: 32px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
  &:focus {
    border-color: $menuActiveText;
  }
  &:active {
    border-color: $menuActiveText;
  }
}
#allmap {
  height: 400px;
}
</style>